<template>
  <div class="back bg-cover w-full h-full">
    <div class="opacity-80 bg-white w-[400px] h-[500px] shadow-lg rounded-lg absolute left-[500px] top-[100px]">
      <h3 class="text-center text-[40px] text-orange-500 font-bold pt-5">Business Recover</h3>
      <el-form ref="FormRef" :model="ruleForm" :rules="rules">
        <div class="text">
          <el-form-item prop="businessId">
            <span>店铺Id：</span><input type="text" id="businessId" v-model="ruleForm.businessId">
          </el-form-item>
        </div>
        <div class="text">
          <el-form-item prop="name">
            <span>店主姓名：</span><input type="text" id="name" v-model="ruleForm.name">
          </el-form-item>
        </div>
        <div class="text">
          <el-form-item prop="phone">
            <span>手机号：</span><input type="text" id="phone" v-model="ruleForm.phone">
          </el-form-item>
        </div>
        <div class="text">
          <el-form-item prop="password">
            <span>密码：</span><input type="password" id="password" v-model="ruleForm.password">
          </el-form-item>
        </div>
        <div class="text">
          <el-form-item prop="password2">
            <span>确认密码：</span><input type="password" id="password2" v-model="ruleForm.password2">
          </el-form-item>
        </div>
        <div class="buttom">
          <button class="but" @click="forget('FormRef')" type="button">修改</button>
          <a @click="this.$router.push({ path: '/business/login' })">取消</a>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  data() {
    var validateCheckPass = ( rule, value, callback ) => {
      if ( value !== this.ruleForm.password ) {
        callback( new Error( "两次密码不一致" ) )
      } else {
        callback()
      }
    }
    return {
      ruleForm: [
        {
          businessId: '',
          name: '',
          phone: '',
          password: '',
          password2: '',
        }
      ],
      rules: {
        businessId: [
          { required: true, message: '请输入店铺Id', trigger: 'blur' },
        ],
        name: [
          { required: true, message: '请输入店主姓名', trigger: 'blur' },
        ],
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur"
          }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          {
            pattern: /^[a-zA-Z0-9]+$/,
            message: "密码只能含有数字+字母",
            trigger: "blur"
          },
          { min: 6, max: 12, message: "长度为6-12位", trigger: 'blur' }
        ],
        password2: [
          { required: true, message: '请再次输入密码', trigger: 'blur' },
          { validator: validateCheckPass, trigger: 'blur' }
        ],

      },
    }
  },
  methods: {
    forget( fromName ) {
      this.$refs[ fromName ].validate( valid => {
        if ( valid ) {
          axios( {
            url: 'http://127.0.0.1:8081/api/business/forget',
            method: 'post',
            params: {
              businessId: document.getElementById( 'businessId' ).value,
              name: document.getElementById( 'name' ).value,
              password: document.getElementById( 'password' ).value,
              businessPhone: document.getElementById( 'phone' ).value
            }
          } ).then( res => {
            if ( res.data.code === 20000 ) {
              this.$message.success( res.data.message );
              this.$router.push( { path: '/business/login' } );
            } else {
              this.$message.error( res.data.message );
            }
          } )
        }
      } )

    }
  }


}
</script>
<style scoped >
.back {
  background: url(../../../assets/img/login.png);
}

span {
  position: relative;
  left: 40px;
}

input {
  position: absolute;
  left: 140px;
}

.but {

  margin-top: 40px;
  letter-spacing: 4px;
}


.buttom a {
  font-size: 15px;
  position: absolute;
  right: 60px;
  bottom: 42px;
}

.buttom a:hover {
  text-decoration: underline;
  color: coral;
}
</style>

<style lang="less" scoped>
/deep/.el-form-item__error {
  padding-top: 0;
  left: 140px
}

* {
  margin: 0;
  padding: 0;
}


.a {
  background-color: rgb(255, 255, 255);
  opacity: 0.7;
  /*阴影（正值，正X向右，正Y向下，颜色）*/
  box-shadow: 10px 25px 25px rgb(171, 171, 168);
  width: 400px;
  height: 350px;
}

h3 {
  text-align: center;
  font-size: 40px;
  padding-top: 20px;
  color: coral;
  font-weight: bold;
}

.but {
  border: 2px solid coral;
  padding: 6px 20px;
  border-radius: 10px;
  font-size: 15px;
}

.but:hover {
  background-color: coral;
  color: rgb(255, 255, 255);
}

span {
  color: #3b3b3b;
  font-size: 20px;
}

input {
  border: 2px solid #616161;
  border-radius: 5px;
  width: 200px;
  height: 30px;
}

.buttom {
  text-align: center;
}

.text {
  margin-top: 30px;
  text-align: center;
}
</style>